<template>
	<view class="goods-item flex" @click="goGoodsDetail(data.serialNo)">
		<view class="pt-12">
			<u-image :width="imgWidth" :height="imgHeight" :src="data.coverImage" radius="24rpx"></u-image>
		</view>
		<view :class="{ 'py-12 pr-12 ml-12': true, 'u-border-bottom': borderBottom }">
			<view class="ellipsis-2 text-12 line-height-18">{{
        data.goodsName
      }}</view>
			<view class="color-warning text-10 line-height-14">馈赠大自然的馈赠</view>
			<view class="color-gray text-10 line-height-14">已售261.3万 | 惊艳度 97.43%</view>
			<view class="flex gap-8 pt-4">
				<view class="tag-error"> 8袋减120元 </view>
				<view class="tag-error"> 8袋减120元 </view>
			</view>
			<view class="flex gap-8 py-8 justify-between items-center">
				<view class="text-red ellipsis-1 text-10">
					<text>￥</text>
					<text class="text-14">{{ data.goodsPriceMin }} 到手价</text>
					<text class="color-gray">￥{{ data.goodsPriceMax }}</text>
				</view>
				<view class="plus-icon">
					<u-icon name="plus" size="24rpx" color="#fff"></u-icon>
				</view>
			</view>
			<view class="ranking py-6 px-4 flex justify-between">
				<view class="flex items-center">
					<u-icon name="star-fill" size="24rpx" color="#ffd200"></u-icon>
					<text class="text-10">食品生鲜热榜 第 1 名</text>
				</view>

				<u-icon name="arrow-right" size="20rpx"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imgWidth: {
				type: String,
				default: "166rpx",
			},
			imgHeight: {
				type: String,
				default: "166rpx",
			},
			borderBottom: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {};
		},
		methods: {
			goGoodsDetail(goodsNo) {
				console.log(goodsNo)
				this.$Router.push({
					name: "goodsDetail",
					params: {
						serialNo: goodsNo,
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.plus-icon {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: $u-primary;
	}
</style>